/*
  学习目标：生命周期-小结
  三大阶段:
    1. 挂载阶段
      1.1 constructor
        类似: vue2中created
        场景: 初始化state 和ref
        注意：👎几乎不用 👎 不在此处发请求
      1.2 render
      1.3 componentDidMount
        类似: vue2中mounted
        场景: 💥 发请求  💥最先获取dom, 绑定事件, 开启定时器等
    2. 更新阶段
      2.1 render
      2.2 componentDidUpdate
        类似: vue2中的updated, watch
        场景: 💥做缓存
      触发更新阶段的两种方式:
        🔔调用setState
        🔔props值改变
      注意:
        更新阶段的钩子函数中, 不能调用setState, 否则直接死循环
    3. 卸载阶段
      3.1 componentWillUnMount
        类似: vue2中beforeDestroy
        场景: 💥做清除的动作, 如解绑事件, 关闭定时器等

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    // 条件渲染, 类似vue中的v-if
    const { isShow } = this.state;
    return <div>{isShow && <Child />}</div>;
  }
}

class Child extends React.Component {
  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  render() {
    return <div>Child</div>;
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }
}
